<template>
  <div>
    <div class="ListSearch">
      <div class="ListSearchLef">
        <el-icon><Search /></el-icon>
        <span>筛选搜索</span>
      </div>
      <div class="ListSearchRig">
        <el-button type="primary">查询</el-button>
        <el-button type="default">重置</el-button>
      </div>
    </div>
    <search-bar @onSearch="onSearch"></search-bar>
    <div class="cateList">
      <div class="cateHead">
        <div class="cateHeadLeft">
          <el-icon size="24px"><Coin /></el-icon>
          <span>数据列表</span>
        </div>
        <el-button type="Info" @click="cateAddShow = true">添加</el-button>
      </div>
      <el-table :data="cates" style="width: 100%" class="el-table-class">
        <el-table-column
          prop="Num"
          label="商品编号"
          width="100"
          class="cateNum"
        />
        <el-table-column prop="Category" label="分类类别" width="150" />
        <el-table-column prop="describe" label="分类描述" />
        <el-table-column prop="PublicityMap01" label="横幅宣传图" width="150">
          <template #default="{ row }">
            <img :src="row.PublicityMap01" width="70" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="PublicityMap01" label="左侧宣传图" width="180">
          <template #default="{ row }">
            <img :src="row.PublicityMap02" width="70" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template #default="{ row }">
            <!--编辑和删除按钮 操作列表-->
            <el-button
              type="primary"
              @click="showUpdateDialog(row.id)"
              size="small"
              >编辑</el-button
            >
            <el-button type="danger" @click="delItem(row.id)" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件定义-->
      <el-pagination
        background
        layout="prev, pager, next, sizes, jumper, total"
        :total="total"
        v-model:page-sizes="page"
        v-model:current-page="pageSizes"
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </div>
    <el-dialog v-model="cateAddShow" title="增加商品分类">
      <add-goods></add-goods>
    </el-dialog>
    <!-- /增加商品分类弹窗 -->
    <!-- 修改商品分类弹窗 -->
    <el-dialog v-model="cateUpdateShow" title="修改商品分类">
      <update-cates :id="cateId"/>
    </el-dialog>
    <!-- /修改商品分类弹窗 -->
  </div>
</template>

<script>
import { renderCateLists, updateCate, delCate } from '../../api/cateLists'
import SearchBar from '@/components/SearchBar.vue'
import AddGoods from './components/AddGoods.vue'
import UpdateCates from './components/UpdateCates.vue'
export default {
  name: 'cateLists',
  data () {
    return {
      cates: [],
      // 定义分页属性
      total: 200,
      page: 20,
      pageSizes: 10,
      searchParams: {
        keyWords: '',
        rangeDate: []
      },
      cateAddShow: false,
      cateUpdateShow: false,
      cateId: -1
    }
  },
  methods: {
    delItem (id) {
      // 删除商品
      // 弹出确认框，确认后删除
      this.$confirm('此操作会彻底删除分类,确定继续吗?', '删除分类').then(() => {
        delCate({ id }).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.msg,
              duration: 1500,
              onClose: () => {
                // 刷新页面
                this.$router.go(0)
              }
            })
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg
            })
          }
        })
      })
    },
    showUpdateDialog (id) {
      // 点击 编辑 显示修改商品弹窗
      this.cateUpdateShow = true
      this.cateId = id
    },
    onSearch (searchParams) {
      // 点击顶部搜索框，开始搜索
      this.searchParams = searchParams
      this.renderCateLists()
    },
    // 点击开关修改当前分类 启用状态
    swicthEnable (id) {
      console.log(id)
      // 行内修改商品分类启动状态
      updateCate({
        id
      }).then(res => {
        if (res.data.code === 200) {
          // 成功后 弹出消息提示框提醒用户
          this.$message({
            type: '更新成功',
            message: res.data.msg,
            duration: 2000,
            onClose: () => {
              // 刷新页面
              this.$router.go(0)
            }
          })
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg
          })
        }
      })
    },
    renderCateLists () {
      renderCateLists({
        keyWords: this.searchParams.keyWords,
        startTime: this.searchParams.rangeDate[0],
        endTime: this.searchParams.rangeDate[1],
        page: this.page,
        pageSizes: this.pageSizes
      }).then((res) => {
        if (res.data.code === 200) {
          this.cates = res.data.data
        }
      })
    }
  },
  sizeChange () {
    this.renderCateLists()
  },
  currentChange () {
    this.renderCateLists()
  },
  components: {
    SearchBar,
    AddGoods,
    UpdateCates
  },
  created () {
    this.renderCateLists()
  }
}

</script>

<style lang="scss" scoped>
.ListSearch {
  display: flex;
  text-align: center;
  justify-content: space-between;
}
.ListSearchInput {
  display: flex;
  width: 450px;
  height: 40px;
  text-align: center;
  & span {
    height: 100%;
    margin-top: 10px;
    width: 100px;
  }
  & input {
    height: 20px;
    border-radius: 20px;
  }
}
.ListSearchLef .ListSearchRig {
  height: 100%;
  display: flex;
  align-items: center;
  margin-top: 15px;
}
.cateHead {
  display: flex;
  justify-content: space-between;
  text-align: center;
  height: 100%;
  margin-top: 15px;
}
.cateNum {
  align-items: center;
  text-align: center;
}
.cateHeadLeft {
  height: 100%;
  display: flex;
  align-items: center;
}
.el-table-class {
  margin-top: 15px;
}
</style>
